<template>
  <div>
    <a-card>
      <a-button type="primary" @click="showModal"> <PlusOutlined style="color: #ffff" />新建</a-button>
      <!-- 弹框 -->
      <a-modal v-model:visible="isModalVisible" title="新建" @ok="handleOk()" @visibleChange="handleModalVisibleChange" style="width: 600px;">
        <a-form :model="formState" :rules="rules" :label-col="labelCol" ref="formRef" :wrapper-col="wrapperCol">
          <a-form-item ref="name" label="模型名称:" name="name">
            <a-input v-model:value="formState.name" />
          </a-form-item>
          <a-form-item label="模型描述:" name="desc">
            <a-textarea v-model:value="formState.desc" />
          </a-form-item>
          <a-form-item label="组态模型:" name="region">
            <a-select v-model:value="formState.region" placeholder="请选择组态模型">
              <a-select-option value="shanghai">Zone one</a-select-option>
              <a-select-option value="beijing">Zone two</a-select-option>
            </a-select>
          </a-form-item>
          <!-- <a-form-item label="组态展示页面:" name="region">
            <a-select v-model:value="formState.region" placeholder="please select your zone">
              <a-select-option value="shanghai">Zone one</a-select-option>
              <a-select-option value="beijing">Zone two</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="连接方式:" name="region">
            <a-select v-model:value="formState.region" placeholder="please select your zone">
              <a-select-option value="shanghai">Zone one</a-select-option>
              <a-select-option value="beijing">Zone two</a-select-option>
            </a-select>
          </a-form-item>
          <a-form :model="formState" :rules="rules" :label-col="labelCol" ref="formRef" :wrapper-col="wrapperCol">
          <a-form-item ref="name" label="超时间(毫秒):" name="name">
            <a-input v-model:value="formState.name" />
          </a-form-item>
          <a-form-item label="数据格式&nbsp:" name="region">
            <a-select v-model:value="formState.region" placeholder="please select your zone">
              <a-select-option value="shanghai">Zone one</a-select-option>
              <a-select-option value="beijing">Zone two</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="串口:" name="region">
            <a-select v-model:value="formState.region" placeholder="please select your zone">
              <a-select-option value="shanghai">Zone one</a-select-option>
              <a-select-option value="beijing">Zone two</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="串口波特率:" name="region">
            <a-select v-model:value="formState.region" placeholder="please select your zone">
              <a-select-option value="shanghai">Zone one</a-select-option>
              <a-select-option value="beijing">Zone two</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="数据位:" name="region">
            <a-select v-model:value="formState.region" placeholder="please select your zone">
              <a-select-option value="shanghai">Zone one</a-select-option>
              <a-select-option value="beijing">Zone two</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="校验位:" name="region">
            <a-select v-model:value="formState.region" placeholder="please select your zone">
              <a-select-option value="shanghai">Zone one</a-select-option>
              <a-select-option value="beijing">Zone two</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="停止位:" name="region">
            <a-select v-model:value="formState.region" placeholder="please select your zone">
              <a-select-option value="shanghai">Zone one</a-select-option>
              <a-select-option value="beijing">Zone two</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="流控:" name="region">
            <a-select v-model:value="formState.region" placeholder="please select your zone">
              <a-select-option value="shanghai">Zone one</a-select-option>
              <a-select-option value="beijing">Zone two</a-select-option>
            </a-select>
          </a-form-item> -->
        </a-form>
      </a-modal>
      <a-button style="margin-left: 10px" @click="Refresh"> <UndoOutlined />刷新</a-button>
      <a-table :dataSource="dataSource" :columns="columns" bordered  style="margin-top: 5px; ">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-button type="link"><FormOutlined />编辑</a-button>
            <a-button type="link" style="color: #ffa128"><UploadOutlined style="color: #ffa128" />数据点表</a-button>
            <a-popconfirm
              title="删除"
              ok-text="确认"
              cancel-text="取消"
              description="你确定要删除吗?"
              @confirm="handleDelete(record)"
              @cancel="cancel"
            >
              <a-button type="link" danger> <DeleteOutlined style="color: red" />删除</a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>
<script setup>
  import { ref, onMounted, reactive } from 'vue';
  import { DeviceDleApi } from '/@/api/system/DeviceDle.js';
  // 表格列配置
  const columns = ref([
    {
      title: '序号',
      dataIndex: 'ID',
      key: 'ID',
    },
    {
      title: '模型名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '模型表述',
      dataIndex: 'dec',
      key: 'dec',
    },
    {
      title: '连接方式',
      dataIndex: 'DLT645ConnectType',
      key: 'DLT645ConnectType',
    },
    {
      title: '模式',
      dataIndex: 'OPCUASecurityModes',
      key: 'OPCUASecurityModes',
    },
    {
      title: '操作',
      dataIndex: 'action',
        key: 'action',
      width:320
    },
  ]);
  //   列表数据
  const dataSource = ref([]);
  async function ModelBusList(val) {
    const parms = {
      type: 30,
    };
    try {
      const res = await DeviceDleApi.modbusModelList(parms);
      //   console.log(res);
      dataSource.value = res.list;
    } catch (error) {
      console.error('表格数据出错', error);
    }
}
  // 刷新按钮
  const Refresh = () => {
    ModelBusList();
  };
  // 新建弹框
  const isModalVisible = ref(false);
  const showModal = () => {
    isModalVisible.value = true;
};
const formRef = ref();
const formState = reactive({
  name: '',
  region: undefined,
  desc: '',
});
const rules = {
    name: [
        {
            required: true,
            message: 'Please input Activity name',
            trigger: 'change',
        },
    ],
    desc: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change',
        },
    ],
}
  onMounted(() => {
    ModelBusList();
  });
</script>

<style scoped></style>
